<!-- mallSettlement -->
<template>
  <div class="mallSettlement content_box">
    <h4>技术服务费配置</h4>
    <div class="headder_setting float_none" v-loading="loading">
      <el-row
        class="header_row"
        :gutter="30"
        v-for="item of typeOption"
        :key="item.OrderType"
      >
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">配置名称：</span>
            <span>{{ item.Desction }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex align-center">
            <span class="tit_span nowarp">结算百分比：</span>
            <el-input type="number" v-model="item.Percentage">
              <template slot="append">%</template>
            </el-input>
          </div>
        </el-col>
      </el-row>
      <el-button class="float_right" type="primary" @click="save"  v-if="hasBtn('manageSetting:save')"
        >保存设置</el-button
      >
    </div>
  </div>
</template>

<script>
import { Save, GetList, GetManageType } from '@/api/system/manage-cost'
// import { GetOrderType } from '@/api/system/share-manage'
export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'mallSettlement',
  components: {},
  data () {
    //这里存放数据
    return {
      setting: {},
      typeOption: [],
      loading: false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.GetOrderTypeFun().then(_ => {
      this.getSetting()
    })
  },
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
  //方法集合
  methods: {
    GetOrderTypeFun () {
      return new Promise((next) => {
        this.loading = true
        GetManageType({}).then(res => {
          console.log(res)
          this.typeOption = res.Data.map(item => {
            return { OrderType: item.EnumName, Desction: item.Desction, Percentage: 0, Id: '00000000-0000-0000-0000-000000000000' }
          })
          next()
        })
      })
    },
    async getSetting () {
      const { Data } = await GetList({})
      this.loading = false
      let options = this.$deepClone(this.typeOption)
      this.typeOption = options.map(item => {
        for (let cell of Data) {
          if (cell.Mname == item.OrderType) {
            item.Percentage = cell.Percentage
            item.Id = cell.Id
          }
        }
        return { ...item }
      })
      // this.setting = Data || { Id: '00000000-0000-0000-0000-000000000000' }
    },
    save () {
      // console.log(this.typeOption)
      let list = this.typeOption.map(item => {
        return { Id: item.Id, MName: item.OrderType, Percentage: item.Percentage }
      })
      Save(list).then(() => {
        this.$notify({
          title: '操作成功',
          message: 'success',
          type: 'success',
          duration: 2000
        })
        this.getSetting()
      })
    }
  },
}
</script>
//@import url(); 引入公共css类
<style  scoped>
.headder_setting {
  width: 35%;
  min-width: 550px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 5px 3px #ececec;
  padding: 10px;
}
.headder_setting .tit_span {
  width: 80px;
  font-size: 0.9rem;
}
.orderReview_box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mallSettlement >>> .el-col {
  line-height: 40px;
}
</style>
